<template>
  <div
    class="draggable-resizable"
    :style="windowStyle"
    @mousedown="onMouseDown"
    @wheel="onWheel"
  >
    <!-- 窗口内容 -->
    <slot></slot>
    <!-- 可以添加一个拖拽手柄（可选） -->
    <div class="resize-handle" @mousedown.stop="startResize"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      isResizing: false,
      position: { top: '100px', left: '100px' },
      size: { width: '300px', height: '200px' },
      dragStart: { x: 0, y: 0 },
      resizeStart: { x: 0, y: 0, width: 0, height: 0 },
    };
  },
  computed: {
    windowStyle() {
      return {
        position: 'absolute',
        top: this.position.top,
        left: this.position.left,
        width: this.size.width,
        height: this.size.height,
        cursor: this.isResizing ? 'se-resize' : 'move',
        userSelect: 'none', // 禁止用户选择文本
      };
    },
  },
  methods: {
    onMouseDown(event) {
      if (event.target.classList.contains('resize-handle')) {
        return; // 如果是拖拽手柄则不执行拖动窗口的逻辑
      }
      this.isDragging = true;
      this.dragStart = { x: event.clientX, y: event.clientY };
      document.addEventListener('mousemove', this.onMouseMove);
      document.addEventListener('mouseup', this.onMouseUp);
    },
    onMouseMove(event) {
      if (!this.isDragging && !this.isResizing) return;

      const dx = event.clientX - this.dragStart.x;
      const dy = event.clientY - this.dragStart.y;

      if (this.isDragging) {
        this.position.top = `${parseInt(this.position.top) + dy}px`;
        this.position.left = `${parseInt(this.position.left) + dx}px`;
      } else if (this.isResizing) {
        this.size.width = `${parseInt(this.resizeStart.width) + dx}px`;
        this.size.height = `${parseInt(this.resizeStart.height) + dy}px`;
      }

      this.dragStart = { x: event.clientX, y: event.clientY };
    },
    onMouseUp() {
      this.isDragging = false;
      this.isResizing = false;
      document.removeEventListener('mousemove', this.onMouseMove);
      document.removeEventListener('mouseup', this.onMouseUp);
    },
    startResize(event) {
      this.isResizing = true;
      this.resizeStart = {
        x: event.clientX,
        y: event.clientY,
        width: this.size.width,
        height: this.size.height,
      };
      document.addEventListener('mousemove', this.onMouseMove);
      document.addEventListener('mouseup', this.onMouseUp);
    },
    onWheel(event) {
      event.preventDefault();
      const scaleFactor = 10; // 缩放比例因子
      if (event.deltaY < 0) {
        // 放大
        this.size.width = `${parseInt(this.size.width) + scaleFactor}px`;
        this.size.height = `${parseInt(this.size.height) + scaleFactor}px`;
      } else {
        // 缩小
        this.size.width = `${Math.max(100, parseInt(this.size.width) - scaleFactor)}px`;
        this.size.height = `${Math.max(100, parseInt(this.size.height) - scaleFactor)}px`;
      }
    },
  },
};
</script>

<style scoped>
.draggable-resizable {
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.resize-handle {
  width: 10px;
  height: 10px;
  background-color: #999;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
</style>
